<template>
  <div class="home">
    <h3>这是vue2</h3>
    <img alt="Vue logo" src="../assets/logo.png">
    <h2>父应用传递的age值{{age}}</h2>
    <h3 @click="pushName">点击向基座传name值</h3>
    <div class="test-box t1"></div>
    <div class="test-box t2" :style="{backgroundImage:'url(' + require(`../assets/2.png`) + ')'}"></div>
    <div class="test-box t3"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      age: 1,
      name: 'zs'
    }
  },
  methods: {
    pushName () {
      this.name += '!'
      window.microApp.dispatch({ name: this.name })
    }
  },
  mounted () {
    window.microApp.addDataListener((data) => {
      console.log('来自父应用的数据', data)
      this.age = data.age
    })
  }
}
</script>


<style scoped lang="less">
  @import "home";
  .test-box{
    width: 100px;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .t1{
    background-image: url("../assets/1.png");
  }
</style>
